<!––
/*
# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
#
# Licensed under the Apache License, Version 2.0 (the "License").
# You may not use this file except in compliance with the License.
# A copy of the License is located at
#
#     http://www.apache.org/licenses/LICENSE-2.0
#
# or in the "license" file accompanying this file. This file is distributed
# on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
# express or implied. See the License for the specific language governing
# permissions and limitations under the License.
#
*/
––>
<div class="h-100 login-bg">
    <div class="container h-100">
        <div class="row h-100">
            <div class="col d-flex justify-content-center align-items-center pb-5">
                <div>
                    <div class="card rounded-0 login-wrapper pl-5 pr-5 pt-4 pb-4">
                        <div>
                            <form [formGroup]="userForm">
                                <div>
                                    <h3 class="text-muted text-center mb-3">Sign up</h3>
                                </div>

                                <div class="form-group">
                                    <input type="text" formControlName="username" class="form-control form-control-sm"
                                        placeholder="User Name" autofocus="" [ngClass]="{ 'is-invalid': submitted && user.username.errors }" />
                                    <div *ngIf="submitted && user.username.errors" class="invalid-feedback">
                                        <div *ngIf="user.username.errors.required">Username is required</div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <input type="email" formControlName="email" class="form-control form-control-sm"
                                        placeholder="Email address" autofocus="" [ngClass]="{ 'is-invalid': submitted && user.email.errors }" />
                                    <div *ngIf="submitted && user.email.errors" class="invalid-feedback">
                                        <div *ngIf="user.email.errors.required">Email is required</div>
                                        <div *ngIf="user.email.errors.email">Invalid Email address</div>
                                    </div>
                                </div>
                                <div *ngIf="error" class="text-danger text-sm-left">
                                    <p>{{error}}</p>
                                </div>

                                <div class="form-group d-flex justify-content-center" (click)="signup()"><a class="btn btn-warning text-white rounded-0 pl-5 pr-5"
                                        role="button">Sign up
                                        <i *ngIf="loading" class='fa fa-circle-o-notch fa-spin'> </i>
                                    </a></div>
                            </form>
                        </div>
                    </div>
                    <p class="text-center p-2">Already have an account?&nbsp;<a routerLink="/signin">Login</a></p>
                </div>
            </div>
        </div>
    </div>
